<template>

	<view class="u-page">

		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<br>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="0.5">
						<view class="demo-layout bg-purple"></view>
					</u-col>
					<u-col span="11">
						<u-skeleton :loading="loading" animate rows=4 titleWidth=70% titleHeight=30 rowsHeight=30>
							<u-input placeholder="请输入内容" disabled border="surround" v-model="test" @change="change"
								customStyle="margin-bottom: 15px;margin-top: 10px">
								<u--text text="发布人工号:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input>
							<!-- <u--text type="info" text="姓名:" customStyle="margin-bottom: 10px;"></u--text> -->
							<u-input placeholder="请输入内容" disabled border="surround" v-model="tester" @change="change"
								customStyle="margin-bottom: 15px">
								<u--text text="发布人姓名:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input>
							<u-input placeholder="请输入内容" disabled border="surround" v-model="create_time"
								@change="change" customStyle="margin-bottom: 15px">
								<u--text text="报修时间:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input>
				<!-- 			<u-picker :show="show" ref="uPicker" :columns="columns" @cancel="cancel" @confirm="confirm"
								@change="changeHandler"></u-picker> -->
							<u-input placeholder="请输入内容" border="surround" disabled v-model="code"
								@change="change" customStyle="margin-bottom: 15px;">
								<u--text text="报修对象:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input>
							<u-input placeholder="请输入内容" border="surround" disabled v-model="title" @change="change"
								customStyle="margin-bottom: 15px">
								<u--text text="设备名:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input>
						<!-- 	<u-input placeholder="请输入内容" border="surround" v-model="Equipment" @change="change"
								customStyle="margin-bottom: 15px">
								<u--text text="数量:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input> -->
							<!-- <div style="position: relative;">
								<u-input placeholder="请输入内容" border="surround" v-model="search" @change="search1"
									customStyle="margin-bottom: 15px">
									<u--text text="报修项目:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
								</u-input>
								<div v-if="search1list.length>0"
									style="position: absolute;opacity: 1.0;z-index: 10;background-color: white;top: 2.4rem;left: 5rem;">
									<u--text v-for="(item, index) in search1list" @click="searchselect(item)"
										:text="item" slot="prefix" margin="0 3px 0 0" type="tips"
										style="margin-bottom:7px"></u--text>
								</div>
							</div> -->
	
								<u-input placeholder="请输入内容" border="surround" disabled v-model="mange_name" @change=""
									customStyle="margin-bottom: 15px">
									<u--text text="维修人:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
								</u-input>
								
			
							<u--text type="info" text="数量:" customStyle="margin-bottom: 10px"></u--text>
							<u-number-box v-model="quantity" disabled @change="valChange" ></u-number-box>
							<u--text type="info" text="问题描述:" customStyle="margin-bottom: 10px;margin-top:10px"></u--text>
							<u--textarea v-model="describe" disabled  placeholder="请输入内容"
								customStyle="margin-bottom: 15px"></u--textarea>
							<u--text type="info" text="问题图片" customStyle="margin-bottom: 10px"></u--text>
							<htz-image-upload :sourceType="['album', 'camera']" :remove="false" :max="1" v-model="ceshiData1"
								@uploadSuccess="ceshiUploadSuccess1" mediaType="image"
								action="https://wdzbx.zsbike.com.cn:10787/api.v1/Upload"></htz-image-upload>
							<u--text type="info" text="报修类型" customStyle="margin-bottom: 10px"></u--text>
							<u-radio-group v-model="category" placement="column" @change="groupChange">
								<u-radio :customStyle="{marginBottom: '11px'}" v-for="(item, index) in radiolist1"
									:key="index" :label="item.name" :name="item.category" disabled
									@change="radioChange">
								</u-radio>
							</u-radio-group>
						<!-- 	<u-button type="primary" text="确定" @click="refer"></u-button> -->
						<u-divider text="以下为维修人员填写"></u-divider>
						<div style="position: relative;margin-top: 10px;">
							<u-input placeholder="请输入内容" :disabled="disabled" border="surround" v-model="search2" @change="searchagain"
								 customStyle="margin-bottom: 15px">
								<u--text text="维修项目:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input>
							<div v-if="search2list.length>0"
								style="position: absolute;opacity: 1.0;z-index: 10;background-color: white;top: 2.4rem;left: 5rem;">
								<u--text v-for="(item, index) in search2list" @click="searchselect2(item)"
									:text="item" slot="prefix" margin="0 3px 0 0" type="tips"
									style="margin-bottom:7px"></u--text>
							</div>
						</div>
						<u--text type="info" text="故障描述:" customStyle="margin-bottom: 10px"></u--text>
						<u--textarea v-model="warn" :disabled="disabled" placeholder="请输入内容"
							customStyle="margin-bottom: 15px"></u--textarea>
						<u--text type="info" text="维修图片" customStyle="margin-bottom: 10px"></u--text>
						<htz-image-upload :sourceType="['album', 'camera']" :disabled="disabled" :max="1" v-model="ceshiData2"
							@uploadSuccess="ceshiUploadSuccess2" :remove="remove" mediaType="image"
							action="https://wdzbx.zsbike.com.cn:10787/api.v1/Upload"></htz-image-upload>
							<u--text type="info" text="处理情况:" customStyle="margin-top: 10px;margin-bottom: 10px"></u--text>
							  <u-radio-group
							    v-model="condition"
							    placement="row"
							    @change="groupChange"
								:disabled="disabled"
							  >
							    <u-radio
							      customStyle="margin-bottom: 12px;margin-right:15px"
							      v-for="(item, index) in radiolist2"
							      :key="index"
							      :label="item.name"
							      :name="item.condition"
							      @change="radioChange2"
							    >
							    </u-radio>
							  </u-radio-group>
						<u-button type="primary" :disabled="disabled" text="确定" @click="referfinish"></u-button>	
						</u-skeleton>
						<view>
							<u-toast ref="uToast"></u-toast>
						</view>
					</u-col>
					<u-col span="0.5">
						<view class="demo-layout bg-purple-dark"></view>
					</u-col>
				</u-row>


			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}

	.main-box {
		display: flex;
		margin: 20rpx;
		justify-content: space-between;
		background: #f7f7f7;
		padding: 30rpx;
	}

	// .bg-purple {
	//     background: #CED7E1;
	// }

	// .bg-purple-light {
	//     background: #e5e9f2;
	// }

	// .bg-purple-dark {
	//     background: #99a9bf;
	// }
</style>
<script>
	$(function() {
		var availableTags = '/index.php/index/index/category1?rank={$data.rank|htmlentities}';
		$("#tags").autocomplete({
			source: availableTags
		});
	});
</script>
<script>
	// import $ from 'jquery'
	// import '@/node_modules/jquery/dist/jquery.min.js'
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				list: [{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "请上传图片",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
					{
						type: 'success',
						title: '成功主题(带图标)',
						message: "提交成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					},
					{
						type: 'error',
						icon: false,
						title: '请选择完成情况',
						message: "上传失败",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
					{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "提交失败，内部服务器错误",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
					{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "请选择完成情况",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
					{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "该设备当天不能重复提交维护单据",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
					{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "参数不能为空或员工数据不实",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
				],
				quantity:'',
				sever: store.state.sever,
				value4: '已完成',
				search: '',
				search2: '',
				search3: '',
				search1list: [],
				search2list: [],
				search3list: [],
				value: '',
				index: '',
				// fileList2: [],
				delivery_asn: '',
				status: "",
				is: "",
				disabled: false,
				product_name: "",
				product_category_name: "",
				test: '',
				tester: '',
				mange_name:'',
				create_time: "",
				ceshiData1: [],
				ceshiData2: [],
				condition: 1,
				vedio: "",
				loading: '',
				id: '',
				repairarr:'',
				repairData1: '',
				repairData2: '',
				uniCloudData: [],
				title: '',
				code: '',
				org: '',
				type: '',
				type1: '',
				type2: '',
				category: '',
				safeguardData: '',
				warn: '',
				describe: '',
				radiolist1: [{
						name: '设备报修',
						disabled: false,
						type: 1,
						category: 1,
					},
					{
						name: '外修',
						disabled: false,
						type: 2,
						category: 2,
					},
					{
						name: '公务工时--普通公务',
						disabled: false,
						type: 3,
						category: 3,
					}, {
						name: '公务工时--车辆',
						disabled: false,
						type: 4,
						category: 4,
					}, {
						name: '公务工时--站台',
						disabled: false,
						type: 5,
						category: 5,
					}, {
						name: '公务工时--场站',
						disabled: false,
						type: 6,
						category: 6,
					}, {
						name: '公务工时--客运站',
						disabled: false,
						type: 7,
						category: 7,
					}
				],
				radiolist2: [{
						name: '已完成',
						disabled: false,
						condition: 1,
					},
					{
						name: '待件',
						disabled: false,
						condition: 3,
					},
				],
				condition: 1,
				show: false,
				loading: false,
				columns: [
					['车辆', '站台', '场站', '硬件报修'],
					['车辆']
				],
				columnData: [
					['车辆'],
					['站台'],
					['场站'],
					['道闸', '门禁', '饭堂', '监控', '电脑', '网络'],
				]
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				// radiovalue1: '香蕉',这是默认选项
			}
		},
		computed: {
			getIcon() {
				return path => {
					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
				}
			},
		},
		components: {
			htzImageUpload,
		},
		onLoad(option) {
			this.userid=store.state.userinfo.userid;
			this.name=store.state.userinfo.nickname;
			this.create_time = uni.$u.timeFormat(this.timestamp, 'yyyy-mm-dd hh:MM');
            this.index=option.index;
			if (typeof(option.id) != "undefined" && option.id != '' && option.id != null) {
				this.id=option.id;
				this.start();
			} else {
				console.log(111)
			}
		},
		mounted() {
			this.loading = false
		},
		methods: {
			select() {
				this.show = true;
			},
			search1(e) {
				uni.request({
					url: 'https://wdzbx.zsbike.com.cn:10787/api.v1/search1', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						query: e,
						rank: 5,
					},
					success: (res) => {
						if (res.data.Status == 1) {
							this.search1list = res.data.Data;
							// console.log(this.search1list);
						} else {
							this.search1list = [];
						}
					}
				});
			},
			searchagain(e) {
				var params = e.split(',');
				var query
				if(params.length>1){
					query = params[params.length-1]
				}else{
					query = e
				}
				// console.log(query);
				uni.request({
					url: 'https://wdzbx.zsbike.com.cn:10787/api.v1/search2', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						query: query,
						rank: 5,
					},
					success: (res) => {
						if (res.data.Status == 1) {
							this.search2list = res.data.Data;
							// console.log(this.search2list);
						} else {
							this.search2list = [];
						}
					}
				});
			},
			search33(e) {
				var params = e.split(',');
				var query
				 // console.log(params.length);
				 // console.log(params);
				if(params.length>1){
					query = params[params.length-1]
				}else{
					query = e
				}
				// console.log(query);
				uni.request({
					url: 'https://wdzbx.zsbike.com.cn:10787/api.v1/searcharr', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						query: query,
					},
					success: (res) => {
						if (res.data.Status == 1) {
							this.search3list = res.data.Data;
							// console.log(this.search2list);
						} else {
							this.search3list = [];
						}
					}
				});
			},
			searchselect(e) {
				console.log(e);
				this.search = e;
				this.search1list = [];
			},
			searchselect2(e) {
				console.log(e);
				console.log(33);
				if (e == "" || e == null || e == undefined) {
					this.search2 = e;
				} else {
					var params = this.search2.split(',');
					if (params.length <= 1) {
						this.search2 = e + ",";
					} else {
						params[params.length - 1] = e;
						this.search2 = params.join(',');
						this.search2 = this.search2 + ",";
					}
				}
				this.search2list = [];
			},
			searchselect3(e) {
				if (e == "" || e == null || e == undefined) {
					this.search3 = e;
				} else {
					var params = this.search3.split(',');
					if (params.length <= 1) {
						this.search3 = e + ",";
					} else {
						params[params.length - 1] = e;
						this.search3 = params.join(',');
						this.search3 = this.search3 + ",";
					}
				}
				this.search3list = [];
			},
			checklogin() {
				var userid = uni.getStorageSync("userid");
				this.userid = userid;
				if (typeof(userid) == "undefined" || userid == '' || userid == null) {
					console.log("未登录");
				}
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},

			start() {
				uni.request({
					url: 'https://wdzbx.zsbike.com.cn:10787/api.v1/WaixiuDetail', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						id: this.id,
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						if(res.data.Status==1){
							
								for (let key in res.data.Data) {
								 // console.log(res.data.Data[key]) // foo, bar
								 if (typeof(res.data.Data[key]) == "undefined" || res.data.Data[key] == '' || res.data.Data[key] == null) {
								 	 res.data.Data[key]="";
								 }
								}
								// this.indexList.push(item);
							this.title = res.data.Data.title;
							this.code = res.data.Data.code;
							this.category = parseInt(res.data.Data.type);
							this.test = res.data.Data.tester;
							this.tester = res.data.Data.tester;
							this.mange_name = res.data.Data.mange_name;
							this.create_time = uni.$u.timeFormat(res.data.Data.create_time, 'yyyy-mm-dd hh:MM');
							this.describe = res.data.Data.describe;
							this.condition = parseInt(res.data.Data.condition);
							this.quantity = res.data.Data.quantity;
							this.warn = res.data.Data.chuli;
							// this.ceshiData1=[];
							// this.ceshiData1.push(this.sever+res.data.Data.img);
					
							if(uni.getStorageSync("userinfo.group_id")!=2){
								this.disabled = true;
								this.remove = false;
							}else{
							  if(this.condition>3){
							  	this.disabled = true;
							  	this.remove = false;
							  }	
							}
							if(res.data.Data.search2!=null||res.data.Data.search2!=""){
								this.search2 = res.data.Data.search2;
							}
							this.ceshiData1.push(this.sever+res.data.Data.img);
							
							if(typeof(res.data.Data.img2) != "undefined" && res.data.Data.img2 != '' && res.data.Data.img2 != null){
								this.ceshiData2.push(this.sever+res.data.Data.img2);
							}else{
								this.ceshiData2=[];
							}
							
					     console.log(this.type);
						 
						}else{
							this.showToast(this.list[3]);
						}
						
					}
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			referfinish() {
				uni.request({
					url: 'https://wdzbx.zsbike.com.cn:10787/api.v1/WaixiuFinish',
					method: 'GET',
					data: {
						id: this.id,
						warn: this.warn,
						describe: this.describe,
						search2: this.search2,
						repairData2: this.repairData2,
						condition: this.condition,
						type:this.category,
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						if (res.data.Status == 1) {
							uni.$emit('queryWaixiu' , {index : this.index,condition:this.condition});
							this.showToast(this.list[1]);
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1000)
						} else if (res.data.Status == 2) {
							this.showToast(this.list[4])
						} else {
							this.showToast(this.list[2])
						}
					}
				});
			},
		
			change(e) {
				this.search1list = [];
			},
			ceshiUploadSuccess1(res) { //上传成功
				this.ceshiData1 = [];
				var _res = JSON.parse(res.data);
				console.log(_res.url);
				this.repairData1 = _res.url;
				this.ceshiData1.push(this.sever+_res.url);
			},
			ceshiUploadSuccess2(res) { //上传成功
				this.ceshiData2 = [];
				var _res = JSON.parse(res.data);
				this.repairData2 = _res.url;
				this.ceshiData2.push(this.sever+_res.url);
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log(e.value[1]);
				this.NumberCode = e.value[1];
				this.show = false;
			},
			cancel(e) {
				this.show = false;
			},
			valChange(e){
				console.log('当前值为: ' + e.value);
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			// radioChange(n) {
			// 	this.type = n;
			// 	console.log(this.type);
			// },
		}
	}
</script>